@import "base.less";

.aionContainer{
    width: 100%;
    height: 100%;
    background: url(/aion/images/game/icon/bg.jpg) no-repeat;
}
.aionTitle{
    position: fixed;
    top: 50px;
    left: 100px;
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    // border: 1px solid #999;
    padding: 5px 20px;
    text-shadow:5px 2px 5px #333;
    // box-shadow: 1px 1px #333;
}

.longjie {
    position: fixed;
    top: 50px;left:50%;
    width: 557px;
    height: 264px;
    margin-left: -278px;
    z-index: 20;
    background: url(/aion/images/game/icon/title.png) no-repeat;
    cursor: pointer;
    -webkit-animation: bounce-down 1.6s linear infinite;
    animation: bounce-down 1.6s linear infinite;
}

.aionMenu{
    width: 100%;
    position: fixed;
    bottom: 40%;
    left: 0;
    .el-row {
        width: 880px;
        margin: 0 auto;
        text-align: center;
        // background:#333;
        .el-button{
            width: 200px;
            padding: 20px 0;
            font-size: 18px;
            // padding: 20px 50px;
        }
    }
}

.aionMain{
    width: 95%;
    position: fixed;
    top: 0;
    left: 2.5%;
    background-color: #fff;;
}

.aionSimulator{
    .el-row{
        .el-col{
            .shouhu{
                cursor: pointer;
                background: url(/aion/images/game/icon/shouhu.jpg) no-repeat -1050px 0;
            }
            .jianxing{
                cursor: pointer;
                background: url(/aion/images/game/icon/jianxing.jpg) no-repeat -400px 0;
            }
            .zhiyu{
                cursor: pointer;
                background: url(/aion/images/game/icon/zhiyu.jpg) no-repeat -1220px 0;
            }
            .hufa{
                cursor: pointer;
                background: url(/aion/images/game/icon/hufa.jpg) no-repeat -900px 0;
            }
            .shaxing{
                cursor: pointer;
                background: url(/aion/images/game/icon/shaxing.jpg) no-repeat -560px 0;
            }
            .gongxing{
                cursor: pointer;
                background: url(/aion/images/game/icon/gongxing.jpg) no-repeat -760px 0;
            }
            .modao{
                cursor: pointer;
                background: url(/aion/images/game/icon/modao.jpg) no-repeat -690px 0;
            }
            .jingling{
                cursor: pointer;
                background: url(/aion/images/game/icon/jingling.jpg) no-repeat -990px 0;
            }
        }
    }
}

.aionCalc{
    .CalcMain{
        width:1000px;
        position: relative;
        top: 50px;
        left: 300px;
        .CalcBox{
            position:relative;
            margin-bottom: 10px;
            .des{
                position: absolute;
                top:11px;left:-289px;
                width:280px;
                height: 52px;
                color: #ff8033;
                line-height:52px;
                text-align: right;
                padding-right: 20px;
                font-size: 14px;
                background: url(/aion/images/game/icon/back_item.png) no-repeat;
            }
            .del{
                position: absolute;
                top:12px;left:74px;
                font-size: 22px;
                color: @danger;
                cursor: pointer;
            }
            .add{
                position: absolute;
                top:38px;left:74px;
                font-size: 22px;
                color: @primary;
                cursor: pointer;
            }
            .strong{
                position: absolute;
                top:-20px;left:22px;
                background-color: @primary;
                color: #fff;
                width:24px;
                height:24px;
                line-height: 24px;
                text-align: center;
                border-radius: 50%;
                z-index: 11;
                font-size: 14px;
            }
            .ms{
                position: absolute;
                top:-11px;left:-289px;
                width:280px;
                font-size: 14px;
                text-align: right;
                background: @primary;
                color: #fff;
                padding-right: 10px;
                border-radius: 20px;
                span{
                    margin-left: 10px;
                    display: inline-block;
                }
            }
        }
    }
    .iconBg{
        position: relative;
        z-index: 10;
        width: 74px;
        height: 74px;
        background: url(/aion/images/game/icon/slot.png) no-repeat; 
    }
    .icon{
        width: 40px;
        height: 40px;
        margin: 17px 0 0 17px;
        display: inline-block;
        background: url(/aion/images/game/icon/slots.png) no-repeat;
        &:hover{
            cursor: pointer;
            background: url(/aion/images/game/icon/item_hover.png) no-repeat -2px -2px;
        }
        .container {
            display:none;
            width: 380px;
            position:absolute;
            top:0;left:74px;
            z-index: 99999;
            box-shadow: 0 0 10px #888888;
        }
        &:hover .container{
            display: block;
        }
    }
    .wuqiYou .icon{
        background-position: -40px 0;
        &:hover{
            background-position:-2px -2px;
        }
    }
    .wuqiHeCheng .icon{
        background-position: 0 0;
    }
    .fjYiFu .icon {
        background-position: -80px -40px;
    }
    .fjXiaYi .icon {
        background-position: -40px -40px;
    }
    .fjHuJian .icon {
        background-position: -40px -80px;
    }
    .fjShouTao .icon {
        background-position: 0 -80px;
        .container {top:-100px;}
    }
    .fjXieZi .icon {
        background-position: -80px -80px;
        .container {top:-200px;}
    }
    .spTouKui .icon {
        background-position: 0 -40px;
    }
    .spXiangLian .icon {
        background-position: -120px -40px;
    }
    .spErHuanZ .icon {
        background-position: -40px -120px;
    }
    .spErHuanY .icon {
        background-position: -80px -120px;
    }
    .spJieZhiZ .icon {
        background-position: -80px 0;
    }
    .spJieZhiY .icon {
        background-position: -120px 0;
        .container {top:-100px;}
    }
    .spYaoDai .icon {
        background-position: 0 -120px;
        .container {top:-200px;}
        
    }
}

// 属性展示
.iconAttrPre{
    position: fixed;
    top: 0;right:0;
    background:rgba(0,0,0,.5);
    color: #fff;
    width: 520px;
    padding: 20px;
}


// 大数据化
.gmmContainer {
    background: #1d2c67;
    color: #fff;
    .header {
        background: url(/aion/images/game/icon/bg/gmmHeaderBg.png) no-repeat center;
        height: 185px;
        h1{
            color: #52ffff;
            font-size: 28px;
            margin: 0 0 0 50%;
            line-height: 70px;
            text-indent: -3em;
        }
    }
    h4 {
        position: absolute;
        top: 100px;
        left: 50%;
        margin-left: -65px;
    }
    .title {
        font-size: 16px;
        padding: 20px;
    }
    .ZhiYeMain{
        width: 1588px;
        margin: 0 auto;
        .el-col{text-align: center;}
        .list{
            width: 180px;
            height: 120px;
            background: #1c4595;
            margin: 0 auto;
            .name {
                padding-top:20px;
                font-size: 16px;
                font-weight: 700;
            }
            .count {
                color: #fec001;
                font-family: Georgia, 'Times New Roman', Times, serif;
                padding-top:15px;
                font-size: 38px;
                font-weight: 700;
            }
        }
    }
    .groupContainer{
        width: 1588px;
        margin: 50px auto 0 auto;
        .groupName{
            // background: #0b277a;
            // border: 1px solid #143c84;
            li{
                margin: 5x;
                background: #1c4595;
                color: #1cf4ff;
                text-indent: 2em;
                line-height: 45px;
                margin-bottom: 5px;
                strong{
                    float: right;
                    margin-right: 20px;
                    font-size: 28px;
                    color: #fec001;
                    font-family: Georgia, 'Times New Roman', Times, serif;
                }
                &.active,&:hover {
                    cursor:pointer;
                    color: #ff8033;
                    background:#000;
                }
            }
        }
        .groupNameMain{
            position: relative;
            h2{
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -50px;
            }
            
            .title{
                width: 120px;
                text-align: center;
                margin: 0 auto;
                background: #1c4595;
                color: #1cf4ff;
                font-size: 28px;
                border-radius: 10px;
                font-family: Georgia, 'Times New Roman', Times, serif;
            }

            .groupNameBox {
                margin: 30px auto 0 auto;
                width: 120px;
                text-align: center;
                background: #1c4595;
                color: #1cf4ff;
                font-size: 28px;
                font-family: Georgia, 'Times New Roman', Times, serif;
                border-radius: 5px;
                strong{
                    color: #fec001;
                    padding: 10px 0;
                    display: block;
                }
                span{
                    font-size: 18px;
                    padding-bottom: 10px;
                    display: block;
                }
                &:hover{
                    cursor:pointer;
                    color: #ff8033;
                    background:#000;
                }
            }
    
        }
    }
    
}



@-webkit-keyframes bounce-down {
    25% {
         -webkit-transform: translateY(-4px);
    }
    50%, 100% {
         -webkit-transform: translateY(0);
    }
    75% {
         -webkit-transform: translateY(4px);
    }
}

@keyframes bounce-down {
     25% {
          transform: translateY(-4px);
     }
     50%, 100% {
          transform: translateY(0);
     }
     75% {
          transform: translateY(4px);
     }
}
